/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */


/* THIS HIDES TITLE ON SMALLER SCREENS - YOU NEED TO SET IT TO THE MAX-WIDTH WHEN THE TITLE WRAPS */

@media (max-width: 370px) {
    body>div.container-fluid.main-container>div.navbar.navbar-default.navbar-fixed-top>div>div.navbar-header>a.navbar-brand {
        display: none;
    }
}


/* LEAFLET HELP BUTTON */

div.help-popup>div.leaflet-popup-tip-container>div {
    width: 0px;
    height: 0px;
}

.help-popup {
    height: 400px;
    font-size: 1.2em;
}


/* DATATABLE STYLING */

.table.table-condensed.dataTable.no-footer>tbody>tr.active>td {
    background-color: #00788a;
}


/* KABLE STYLING */

.table>thead>tr>th {
    vertical-align: top;
}

#macroinvertebrates>div>table>thead>tr>th {
    vertical-align: bottom;
}

#physicochemical-and-microbiological-water-quality>div>table>thead>tr>th {
    vertical-align: bottom;
}


/* BANNER IMAGE */

#banner-img {
    background-image: url("./images/Rivers\ WQ\ cropped.jpg");
    height: 332px;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 18px;
    padding-top: 194px;
    margin-left: -28px;
    margin-top: -35px;
    margin-right: -28px;
}

@media (max-width: 476px) {
    #banner-img {
        /* move text up on narrower screens */
        padding-top: 136px;
    }
}

@media (max-width: 369px) {
    #banner-img {
        /* move text up on narrower screens */
        padding-top: 92px;
    }
}

@media (max-width: 312px) {
    #banner-img {
        /* move text up on narrower screens */
        padding-top: 40px;
    }
}

#banner-img>div {
    color: white;
    background: -o-linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    padding: 12px;
    padding-left: 15px;
    padding-right: 30px;
    font-size: 2em;
    width: 790px;
    max-width: 100%;
}

#hide-header>h2 {
    display: none;
}